<template>
  <div class="summary_of_consumption">
    <el-form
      :inline="true"
      :model="elform"
      class="demo-form-inline"
      size="mini"
    >
      <el-form-item label="日期:" label-width="40px">
        <el-date-picker
          v-model="Timevalue"
          type="daterange"
          align="left"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="钱包:" label-width="40px">
        <el-select
          v-model="consumeWalletNo"
          placeholder="请选择"
          size="mini"
          clearable
        >
          <el-option
            v-for="item in paylist"
            :key="item.walletNo"
            :label="item.walletName"
            :value="item.walletNo"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit"
          size="mini"
          icon="el-icon-search"
          >查询</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-popover width="500" placement="top" trigger="click">
          <!-- <el-button slot="reference" size="mini" type="primary" icon="el-icon-edit-outline">自定义</el-button> -->
        </el-popover>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="onExport"
          size="mini"
          icon="el-icon-document-copy"
          >导出</el-button
        >
      </el-form-item>
    </el-form>
    <div class="tablemian">
      <el-table
        v-loading="loading"
        :header-cell-style="(header) => headFirst(header, 2)"
        ref="table"
        border
        style="width: 100%"
        :data="datalist"
        class="table-fixed"
      >
        <el-table-column
          prop="groupName"
          align="center"
          label="组别"
          fixed
        ></el-table-column>
        <el-table-column align="center" label="发卡">
          <el-table-column
            prop="cardUserCount"
            align="center"
            label="人次"
          ></el-table-column>
          <el-table-column
            prop="cardCostBalance"
            align="center"
            label="收工本费"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.cardCostBalance | amountyuan }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="cardCashBalance" align="center" label="收押金">
            <template slot-scope="scope">
              <div>{{ scope.row.cardCashBalance | amountyuan }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="cardManageBalance"
            align="center"
            label="收管理费"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.cardManageBalance | amountyuan }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="cardBalance" align="center" label="预存款">
            <template slot-scope="scope">
              <div>{{ scope.row.cardBalance | amountyuan }}</div>
            </template>
          </el-table-column>
          <!-- <el-table-column
                  prop="restrictionNumber_lunch"
                  align="center" 
                  label="预存款"
                >
          </el-table-column>-->
        </el-table-column>
        <el-table-column align="center" label="退卡">
          <el-table-column
            prop="returnUserCount"
            align="center"
            label="人次"
          ></el-table-column>
          <el-table-column
            prop="returnRealityBalance"
            align="center"
            label="退款"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.returnRealityBalance | amountyuan }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="returnCashBalance"
            align="center"
            label="退押金"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.returnCashBalance | amountyuan }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="returnManageBalance"
            align="center"
            label="退管理费"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.returnManageBalance | amountyuan }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="存款">
          <el-table-column
            prop="rechargeUserCount"
            align="center"
            label="人次"
          ></el-table-column>
          <el-table-column
            prop="localAdjustAmount"
            align="center"
            label="卡务中心"
            min-width="120px"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.localAdjustAmount | amountyuan }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="machineAdjustAmount"
            align="center"
            width="120"
            label="充值机"
            min-width="120px"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.machineAdjustAmount | amountyuan }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="appAdjustAmount"
            align="center"
            label="手机充值"
            min-width="120px"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.appAdjustAmount | amountyuan }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="platformAdjustAmount"
            align="center"
            label="无卡现金充值"
            min-width="120px"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.platformAdjustAmount | amountyuan }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="取款">
          <el-table-column
            prop="drawUserCount"
            align="center"
            label="人次"
          ></el-table-column>
          <el-table-column prop="drawExpenditure" align="center" label="金额">
            <template slot-scope="scope">
              <div>{{ scope.row.drawExpenditure | amountyuan }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="补卡">
          <el-table-column
            prop="replacementUserCount"
            align="center"
            label="人次"
          ></el-table-column>
          <el-table-column
            prop="replacementCostBalance"
            align="center"
            label="收工本费"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.replacementCostBalance | amountyuan }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="replacementCashBalance"
            align="center"
            label="收押金"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.replacementCashBalance | amountyuan }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="损益">
          <el-table-column
            prop="profitLossUserCount"
            align="center"
            label="人次"
          ></el-table-column>
          <el-table-column prop="profitLossBalance" align="center" label="金额">
            <template slot-scope="scope">
              <div>{{ scope.row.profitLossBalance | amountyuan }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="坏账">
          <el-table-column
            prop="badDebUserCount"
            align="center"
            label="人次"
          ></el-table-column>
          <el-table-column prop="badDebCashBalance" align="center" label="金额">
            <template slot-scope="scope">
              <div>{{ scope.row.badDebCashBalance | amountyuan }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="储值消费">
          <el-table-column
            prop="successExpenditureCount"
            align="center"
            label="人次"
          ></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="计次消费">
          <el-table-column
            prop="timesExpenditureCount"
            align="center"
            label="人次"
          ></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="营业总收入">
          <el-table-column
            prop="expenditureCount"
            align="center"
            label="人次"
          ></el-table-column>
          <el-table-column
            prop="expenditureBalance"
            align="center"
            label="金额"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.expenditureBalance | amountyuan }}</div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 钱包列表选项
      paylist: [],
      // 当前选项
      consumeWalletNo: "",
      elform: {},
      Timevalue: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      
      datalist: [],
      loading: false,
      // pageNum:1,
      // pageSize:10,
      // currentPage:1,
      // recordCount:0,
      searchInfo: {},
      exoprtlist: [],
      filename: "消费汇总",
    };
  },
  created() {
    this.Timevalue = [this.getNowTime("yy-mm-01"), this.getNowTime("yy-mm-dd")];
    // 获取钱包列表
    this.getPayNumber();
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid;
      },
    },
  },
  methods: {
    // 获取钱包
    getPayNumber() {
      this.paylist = [];
      this.$http({
        url: this.$http.adornUrl("/unit/unit-wallet-info-list"),
        method: "post",
        data: this.$http.adornData({
          messageContent: { unitGuid: this.changeschoolid },
          messageType: 0,
        }),
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          data.messageContent.map((item) => {
            if (Number(item.walletNo) != 100) {
              this.paylist.push(item);
            }
          });
          console.log(this.paylist);
        } else {
          this.$message({
            showClose: true,
            message: data.errorMessage,
            type: "error",
          });
        }
      });
    },
    onSubmit() {
      this.searchInfo = {};
      this.getgatherlis();
    },
    onExport() {
      if (this.datalist.length == 0) {
        this.$message({
          message: "查询数据后导出",
          type: "warning",
        });
        return false;
      }
      this.outexecel();
    },
    outexecel() {
      this.$http({
        url: this.$http.adornUrl("/terminal/consume/consume-gather-search"),
        method: "post",
        data: this.$http.adornData({
          messageContent: this.searchInfo,
          messageType: this.messageType,
        }),
      }).then(({ data }) => {
        if (data.messageCode === 200) {
          this.exoprtlist = data.messageContent;
          for (var i = 0; i < this.exoprtlist.length; i++) {
            this.exoprtlist[i].cardCostBalance = this.amountyua(
              this.exoprtlist[i].cardCostBalance
            );
            this.exoprtlist[i].cardCashBalance = this.amountyua(
              this.exoprtlist[i].cardCashBalance
            );
            this.exoprtlist[i].cardManageBalance = this.amountyua(
              this.exoprtlist[i].cardManageBalance
            );
            this.exoprtlist[i].returnRealityBalance = this.amountyua(
              this.exoprtlist[i].returnRealityBalance
            );
            this.exoprtlist[i].returnCashBalance = this.amountyua(
              this.exoprtlist[i].returnCashBalance
            );
            this.exoprtlist[i].returnManageBalance = this.amountyua(
              this.exoprtlist[i].returnManageBalance
            );
            this.exoprtlist[i].appAdjustAmount = this.amountyua(
              this.exoprtlist[i].appAdjustAmount
            );
            this.exoprtlist[i].machineAdjustAmount = this.amountyua(
              this.exoprtlist[i].machineAdjustAmount
            );
            this.exoprtlist[i].platformAdjustAmount = this.amountyua(
              this.exoprtlist[i].platformAdjustAmount
            );
            this.exoprtlist[i].drawExpenditure = this.amountyua(
              this.exoprtlist[i].drawExpenditure
            );
            this.exoprtlist[i].replacementCostBalance = this.amountyua(
              this.exoprtlist[i].replacementCostBalance
            );
            this.exoprtlist[i].replacementCashBalance = this.amountyua(
              this.exoprtlist[i].replacementCashBalance
            );
            this.exoprtlist[i].profitLossBalance = this.amountyua(
              this.exoprtlist[i].profitLossBalance
            );
            this.exoprtlist[i].badDebCashBalance = this.amountyua(
              this.exoprtlist[i].badDebCashBalance
            );
            this.exoprtlist[i].expenditureBalance = this.amountyua(
              this.exoprtlist[i].expenditureBalance
            );
          }
          setTimeout(() => {
            this.export2Excel();
          }, 100);
        }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
    export2Excel() {
      const nowtime = this.getimeto();
      require.ensure([], () => {
        let multiHeader = [
          [
            // "组别",
            // "发卡",
            // "",
            // "",
            // "",
            // "退卡",
            // "",
            // "",
            // "",
            // "存款",
            // "",
            // "",
            // "",
            // "取款",
            // "",
            // "补卡",
            // "",
            // "",
            // "损益",
            // "",
            // "坏账",
            // "",
            // "储值消费",
            // "计次消费",
            // "营业收入",
            // ""
          ],
        ];
        let multiHeader2 = [
          [
            "组别",
            "发卡",
            "",
            "",
            "",
            "退卡",
            "",
            "",
            "",
            "存款",
            "",
            "",
            "",
            "",
            "取款",
            "",
            "补卡",
            "",
            "",
            "损益",
            "",
            "坏账",
            "",
            "储值消费",
            "计次消费",
            "营业收入",
            "",
            //  "组别",
            //  "人次",
            //  "收工本费",
            //  "收押金",
            //  "收管理费",
            //  "人次",
            //  "退存款",
            //  "退押金",
            //  "退管理费",
            //  "存款",
            //  "软件存款",
            //  "充值机存款",
            //  "平台存款",
            //  "人次",
            //  "金额",
            //  "人次",
            //  "收工本费",
            //  "收押金",
            //  "人次",
            //  "金额",
            //  "人次",
            //  "金额",
            //  "人次",
            //  "人次",
            //  "人次",
            //  "金额"
          ],
        ];

        let tHeader = [
          "组别",
          "人次",
          "收工本费",
          "收押金",
          "收管理费",
          "人次",
          "退存款",
          "退押金",
          "退管理费",
          "存款",
          "本地存款",
          "软件存款",
          "充值机存款",
          "平台存款",
          "人次",
          "金额",
          "人次",
          "收工本费",
          "收押金",
          "人次",
          "金额",
          "人次",
          "金额",
          "人次",
          "人次",
          "人次",
          "金额",
        ];

        let merges = [
          "A1:A2",
          "B1:E1",
          "F1:I1",
          "J1:N1",
          "O1:P1",
          "Q1:S1",
          "T1:U1",
          "V1:W1",
          "X1:AA1",
        ];

        const { export_json_to_excel } = require("../../excel/Export2Excel");
        const filterVal = [
          "groupName",
          "cardUserCount",
          "cardCostBalance",
          "cardCashBalance",
          "cardManageBalance",
          "returnUserCount",
          "returnRealityBalance",
          "returnCashBalance",
          "returnManageBalance",
          "rechargeUserCount",
          "localAdjustAmount",
          "appAdjustAmount",
          "machineAdjustAmount",
          "platformAdjustAmount",
          "drawUserCount",
          "drawExpenditure",
          "replacementUserCount",
          "replacementCostBalance",
          "replacementCashBalance",
          "profitLossUserCount",
          "profitLossBalance",
          "badDebUserCount",
          "badDebCashBalance",
          "successExpenditureCount",
          "timesExpenditureCount",
          "expenditureCount",
          "expenditureBalance",
        ];
        console.log(this.exoprtlist);
        const list = this.exoprtlist;
        const data = this.formatJson(filterVal, list);

        export_json_to_excel({
          multiHeader2, //这里是第二行的表头
          header: tHeader,
          data,
          merges,
          filename: this.filename + nowtime,
          tableheader: "2",
        });
      });
    },
    //汇总查询
    getgatherlis() {
      this.searchInfo.unitGuid = this.changeschoolid;
      if (this.Timevalue !== null) {
        this.searchInfo.startDate = this.Timevalue[0];
        this.searchInfo.endDate = this.Timevalue[1];
      }
      this.searchInfo.walletNo = this.consumeWalletNo;
      this.loading = true;
      this.$http({
        url: this.$http.adornUrl("/terminal/consume/consume-gather-search"),
        method: "post",
        data: this.$http.adornData({
          messageContent: this.searchInfo,
          messageType: 0,
        }),
      }).then(({ data }) => {
        this.loading = false;
        if (data.messageCode == 200) {
          console.log(data);
          this.datalist = data.messageContent;
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    },

    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChangepage(val) {
      this.pageNum = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.summary_of_consumption {
  padding: 20px;

  .el-table__row .el-table__row--level-1 {
    background-color: #e5e9f2;
  }
  .demo-form-inline,
  .demo-form-inline1 {
    height: 50px;
    width: 1234px;
    display: flex;
    /deep/.el-form-item__label {
      padding-right: 5px;
    }
    .el-form-item {
      margin-bottom: 0px;
    }
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 330px;
    }
  }
  .demo-form-inline1 {
    border-bottom: 1px solid #e5e9f2;
    .searchmarigin {
      margin-left: 20px;
    }
  }
  .tablemian {
    //滚动条的宽度
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    //滚动条的滑块
    ::-webkit-scrollbar-thumb {
      background-color: #a1a3a9;
      border-radius: 3px;
    }
    .table-fixed {
      /deep/ .el-table__fixed {
        height: 100% !important; //设置高优先，以覆盖内联样式
      }
    }
  }
  .page {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>